<template>
    <div class="linebtn">
        <div class="btn" :class="idx=='0'?'select':''" @click="golink('/market/friend','0','friend')">好友管理</div>
        <div class="btn" :class="idx=='1'?'select':''" @click="golink('/market/group','1','group')">群管理</div>
        <div class="btn" :class="idx=='2'?'select':''" @click="golink('/market/wechat_moments','2','wechat_moments')">朋友圈管理</div>
        <div class="btn" :class="idx=='3'?'select':''" @click="golink('/market/assistant','3','assistant')">助手设置</div>
        <div class="btn" :class="idx=='4'?'select':''" @click="golink('/market/greet','4','greet')">快捷语设置</div>
    </div>
</template>
<script>
  export  default {
    name:"nabar",
    props:{
      // wxid: {
      //   type: String,
      //   default: '',
      // },
      index:String,
      params:Object,
    },
    data() {
      return {
        idx:'0',
        arr:{},
      }
    },
    watch:{
      index: {
        handler(newValue,oldValue){
        this.init()
        },
        deep: true
      },
      params: {
        handler(newValue,oldValue){
        this.init()
        },
        deep: true
      }
    },
    mounted(){
        this.init()
    },
    methods: {
      init(){
        this.idx=this.index
        this.arr=this.params
      },
      golink(path,index,name){
        if(index!=this.idx){
            this.$router.push({ path,name,query:this.arr}).catch(()=>{});
        }
      },
    }
  }
  
  </script>
  
  <style scoped lang="scss">
 .linebtn{
    display: flex;
    margin: -10px 0 10px 5px;
    height: 38px;
    .btn{
        width: 90px;
        text-align: center;
        line-height: 38px;
        font-size: 14px;
        color: #8c8c8c;
        margin-right: 10px;
        border: 1px solid #eaeff2;
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;
        .link-type{
          color: #8c8c8c;
        }
    }
    .select{
        background-color: #eaf6ff;
        border:1px solid #288dfc;
        color: #288dfc;
        font-weight: 550;
    }
  }
  </style>
  